.activity-feed {
  @include vertical-card-layout;
  position: relative;
  min-height: 500px;
  gap: $pad-medium;

  &__header-wrap {
    .form-field {
      margin-bottom: 0;
    }
  }

  &__load-activities-button {
    color: $core-vibrant-blue;
    vertical-align: bottom;
    padding: 6px;

    .fleeticon-chevronleft,
    .fleeticon-chevronright {
      &:before {
        font-size: 0.5rem;
        font-weight: $bold;
        position: relative;
        top: -2px;
      }
    }

    .fleeticon-chevronleft {
      margin-right: $pad-small;
    }

    .fleeticon-chevronright {
      margin-left: $pad-small;
    }

    &:first-of-type {
      margin-right: $pad-large;
    }

    &:hover:not(.button--disabled),
    &:focus {
      background-color: $ui-fleet-black-10;
    }
  }

  &__no-more-activities {
    text-align: center;
  }

  &__no-activities {
    font-size: $x-small;
    p {
      margin-top: 0;
    }
  }

  .spinner {
    z-index: 11;
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
